<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <div class="icon-location-box" @click="selectAddress">
        <div class="icon-location"></div>
      </div>
      <div class="location-text">
        {{ selectedAddress || '选择收货地址' }}<i class="fa fa-caret-down"></i>
      </div>
    </header>

    <!-- search部分 -->
    <div class="search">
      <div class="search-fixed-top" ref="fixedBox">
        <div class="search-box" @click="showSearch = true">
          <i class="fa fa-search"></i>搜索饿了么商家、商品名称
        </div>
      </div>
    </div>

    <!-- 点餐分类部分 -->
    <ul class="foodtype">
      <li v-for="category in categories" :key="category.id" @click="selectCategory(category.id)">
        <img :src="getCategoryImage(category.id)" />
        <p>{{ category.name }}</p>
      </li>
    </ul>

    <!-- 横幅广告部分 -->
    <div class="banner">
      <h3>品质套餐</h3>
      <p>搭配齐全吃得好</p>
      <a>立即抢购 &gt;</a>
    </div>

    <!-- 超级会员部分 -->
    <div class="supermember">
      <div class="left">
        <img src="../assets/super_member.png" />
        <h3>超级会员</h3>
        <p>&#8226; 每月享超值权益</p>
      </div>
      <div class="right">立即开通 &gt;</div>
    </div>

    <!-- 推荐商家部分 -->
    <div class="recommend">
      <div class="recommend-line"></div>
      <p>推荐商家</p>
      <div class="recommend-line"></div>
    </div>

    <!-- 推荐方式部分 -->
    <ul class="recommendtype">
      <li @click="toggleSortMenu">
        综合排序<i class="fa fa-caret-down"></i>
        <div class="sort-menu" v-if="showSortMenu">
          <div
              v-for="sort in sortOptions"
              :key="sort.value"
              :class="{ active: selectedSort === sort.value }"
              @click="selectSort(sort.value)"
          >
            {{ sort.label }}
          </div>
        </div>
      </li>
      <li @click="selectSort('distance')">距离最近</li>
      <li @click="selectSort('sales')">销量最高</li>
      <li @click="showFilter = true">
        筛选<i class="fa fa-filter"></i>
      </li>
    </ul>

    <!-- 推荐商家列表部分 -->
    <ul class="business">
      <li
          v-for="business in filteredBusinesses"
          :key="business.id"
          @click="toBusinessInfo(business.id)"
      >
        <img :src="getBusinessImage(business.businessImg)" />
        <div class="business-info">
          <div class="business-info-h">
            <h3>{{ business.businessName }}</h3>
            <div class="business-info-like" @click.stop="toggleLike(business.id)">
              {{ business.isLiked ? '♥' : '♡' }}
            </div>
          </div>
          <div class="business-info-star">
            <div class="business-info-star-left">
              <i
                  v-for="n in 5"
                  :key="n"
                  class="fa fa-star"
                  :class="{ filled: n <= Math.floor(business.rating || 0) }"
              ></i>
              <p>{{ business.rating || 0 }} 月售{{ business.monthSales || 0 }}单</p>
            </div>
            <div class="business-info-star-right" v-if="business.deliveryType">蜂鸟专送</div>
          </div>
          <div class="business-info-delivery">
            <p>&#165;{{ business.startPrice }}起送 | &#165;{{ business.deliveryPrice }}配送</p>
            <p>{{ business.distance || '3.22' }}km | {{ business.deliveryTime || '30' }}分钟</p>
          </div>
          <div class="business-info-explain" v-if="business.businessExplain">
            <div>{{ business.businessExplain }}</div>
          </div>
          <div class="business-info-promotion" v-for="(activity, index) in business.activities" :key="index">
            <div class="business-info-promotion-left">
              <div
                  class="business-info-promotion-left-incon"
                  :style="{
          backgroundColor: getActivityColor(activity.type)
        }"
              >
                {{ getActivityIcon(activity.type) }}
              </div>
              <p>{{ activity.content }}</p>
            </div>
          <div class="business-info-promotion" v-for="(activity, index) in business.activities" :key="index">
          <div class="business-info-promotion-left">
            <div
                class="business-info-promotion-left-incon"
                :style="{
          backgroundColor: getActivityColor(activity.type)
        }"
            >
              {{ getActivityIcon(activity.type) }}
            </div>
            <p>{{ activity.content }}</p>
          </div>
        </div>
            <div
                class="business-info-promotion-right"
                v-if="index === 0 && business.activities.length > 1"
            >
              <p>{{ business.activities.length }}个活动</p>
              <i class="fa fa-caret-down"></i>
            </div>
          </div>
        </div>
      </li>
    </ul>

    <!-- 加载状态 -->
    <div class="loading" v-if="loading">
      <i class="fa fa-spinner fa-spin"></i>
      <span>加载中...</span>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-if="!loading && businesses.length === 0">
      <i class="fa fa-store"></i>
      <p>暂无商家</p>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>

    <!-- 地址选择模态框 -->
    <div class="modal" v-if="showAddressModal">
      <div class="modal-content">
        <div class="modal-header">
          <h4>选择收货地址</h4>
          <i class="fa fa-times" @click="showAddressModal = false"></i>
        </div>
        <div class="address-list">
          <div
              v-for="address in userAddresses"
              :key="address.id"
              class="address-item"
              :class="{ active: selectedAddressId === address.id }"
              @click="selectUserAddress(address)"
          >
            <div class="address-info">
              <p class="address-name">{{ address.contactName }} {{ address.contactPhone }}</p>
              <p class="address-detail">{{ address.fullAddress }}</p>
            </div>
            <i class="fa fa-check" v-if="selectedAddressId === address.id"></i>
          </div>
          <div class="add-address" @click="toAddAddress">
            <i class="fa fa-plus"></i>
            <span>添加新地址</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索模态框 -->
    <div class="modal" v-if="showSearch">
      <div class="modal-content search-modal">
        <div class="search-header">
          <div class="search-input">
            <i class="fa fa-search"></i>
            <input
                type="text"
                v-model="searchKeyword"
                placeholder="搜索商家、商品"
                @keyup.enter="performSearch"
                ref="searchInput"
            >
          </div>
          <span @click="showSearch = false">取消</span>
        </div>
        <div class="search-history" v-if="searchHistory.length > 0">
          <h5>搜索历史</h5>
          <div class="history-tags">
            <span
                v-for="history in searchHistory"
                :key="history"
                class="history-tag"
                @click="searchKeyword = history; performSearch()"
            >
              {{ history }}
            </span>
          </div>
          <div class="clear-history" @click="clearSearchHistory">
            <i class="fa fa-trash"></i>
            <span>清空搜索历史</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选模态框 -->
    <div class="modal" v-if="showFilter">
      <div class="modal-content filter-modal">
        <div class="modal-header">
          <h4>筛选</h4>
          <i class="fa fa-times" @click="showFilter = false"></i>
        </div>
        <div class="filter-options">
          <div class="filter-section">
            <h5>商家特色</h5>
            <div class="filter-tags">
              <span
                  v-for="tag in businessTags"
                  :key="tag.value"
                  class="filter-tag"
                  :class="{ active: selectedTags.includes(tag.value) }"
                  @click="toggleTag(tag.value)"
              >
                {{ tag.label }}
              </span>
            </div>
          </div>
          <div class="filter-section">
            <h5>人均价格</h5>
            <div class="price-range">
              <input type="number" v-model="minPrice" placeholder="最低价">
              <span>-</span>
              <input type="number" v-model="maxPrice" placeholder="最高价">
            </div>
          </div>
        </div>
        <div class="filter-actions">
          <button class="reset-btn" @click="resetFilter">重置</button>
          <button class="confirm-btn" @click="applyFilter">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
import { useRouter } from "vue-router";
import { businessAPI } from '@/api/business.js';
import { addressAPI } from '@/api/address.js';
import Footer from "../components/Footer.vue";

const router = useRouter();
const fixedBox = ref(null);

// 响应式数据
const businesses = ref([]);
const userAddresses = ref([]);
const selectedAddress = ref('沈阳市规划大厦');
const selectedAddressId = ref(null);
const selectedCategory = ref('all');
const searchKeyword = ref('');
const loading = ref(false);
const showAddressModal = ref(false);
const showSearch = ref(false);
const showFilter = ref(false);
const showSortMenu = ref(false);
const selectedSort = ref('default');
const selectedTags = ref([]);
const minPrice = ref('');
const maxPrice = ref('');
const searchHistory = ref([]);
const searchInput = ref(null);

// 分类数据
const categories = ref([
  { id: 'all', name: '全部' },
  { id: '1', name: '美食' },
  { id: '2', name: '早餐' },
  { id: '3', name: '跑腿代购' },
  { id: '4', name: '汉堡披萨' },
  { id: '5', name: '甜品饮品' },
  { id: '6', name: '速食简餐' },
  { id: '7', name: '地方小吃' },
  { id: '8', name: '米粉面馆' },
  { id: '9', name: '包子粥铺' },
  //{ id: '10', name: '炸鸡炸串' }
]);

// 排序选项
const sortOptions = ref([
  { label: '智能排序', value: 'default' },
  { label: '距离最近', value: 'distance' },
  { label: '销量最高', value: 'sales' },
  { label: '评分最高', value: 'rating' },
  { label: '起送价最低', value: 'startPrice' },
  { label: '配送费最低', value: 'deliveryPrice' },
  { label: '人均高到低', value: 'priceDesc' },
  { label: '人均低到高', value: 'priceAsc' }
]);

// 商家标签
const businessTags = ref([
  { label: '蜂鸟专送', value: 'delivery' },
  { label: '品牌商家', value: 'brand' },
  { label: '新店开业', value: 'new' },
  { label: '外卖券', value: 'coupon' },
  { label: '准时达', value: 'ontime' },
  { label: '开发票', value: 'invoice' }
]);

// 页面加载时初始化数据
onMounted(() => {
  loadBusinesses();
  //loadUserAddresses();
  loadSearchHistory();
  setupScrollListener();
});

// 设置滚动监听
const setupScrollListener = () => {
  const handleScroll = () => {
    const scroll = document.documentElement.scrollTop || document.body.scrollTop;
    const width = document.documentElement.clientWidth;

    if (fixedBox.value) {
      if (scroll > width * 0.12) {
        fixedBox.value.style.position = "fixed";
        fixedBox.value.style.left = "0";
        fixedBox.value.style.top = "0";
      } else {
        fixedBox.value.style.position = "static";
      }
    }
  };

  document.addEventListener("scroll", handleScroll);

  onUnmounted(() => {
    document.removeEventListener("scroll", handleScroll);
  });
};

// 加载商家列表
const loadBusinesses = async () => {
  loading.value = true;
  try {
    const response = await businessAPI.getBusinesses();

    // 根据API响应结构调整
    if (response.data && response.data.success === true && response.data.data) {
      businesses.value = response.data.data;
    } else if (response.data) {
      businesses.value = response.data;
    }

    // 添加模拟数据（实际项目中从API获取）
    // businesses.value.forEach(business => {
    //   //business.rating = parseFloat((Math.random() * 2 + 3).toFixed(1)); // 3-5分
    //   //business.monthSales = Math.floor(Math.random() * 1000) + 100; // 100-1100单
    //   //business.deliveryTime = Math.floor(Math.random() * 20) + 20; // 20-40分钟
    //   //business.distance = (Math.random() * 5).toFixed(2); // 0-5km
    //   business.isLiked = Math.random() > 0.5; // 随机喜欢状态
    //   business.deliveryType = Math.random() > 0.3 ? '蜂鸟专送' : null;
    //
    //   // // 模拟活动数据
    //   // business.activities = [
    //   //   { type: 'new', content: '新用户立减15元' },
    //   //   { type: 'special', content: '特价商品5元起' }
    //   // ].slice(0, Math.floor(Math.random() * 2) + 1);
    // });

  } catch (error) {
    console.error('获取商家列表失败:', error);
  } finally {
    loading.value = false;
  }
};

// 加载用户地址
const loadUserAddresses = async () => {
  try {
    const response = await addressAPI.getUserAddresses();
    if (response.data && response.data.success === true && response.data.data) {
      userAddresses.value = response.data.data;
    } else if (response.data) {
      userAddresses.value = response.data;
    }

    // 设置默认地址
    if (userAddresses.value.length > 0) {
      const defaultAddress = userAddresses.value[0];
      selectedAddress.value = defaultAddress.fullAddress;
      selectedAddressId.value = defaultAddress.id;
    }
  } catch (error) {
    console.error('获取地址列表失败:', error);
  }
};

// 加载搜索历史
const loadSearchHistory = () => {
  const history = localStorage.getItem('searchHistory');
  if (history) {
    searchHistory.value = JSON.parse(history);
  }
};

// 保存搜索历史
const saveSearchHistory = (keyword) => {
  if (!keyword.trim()) return;

  // 移除重复项
  searchHistory.value = searchHistory.value.filter(item => item !== keyword);
  // 添加到开头
  searchHistory.value.unshift(keyword);
  // 限制数量
  searchHistory.value = searchHistory.value.slice(0, 10);
  // 保存到本地存储
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
};

// 清空搜索历史
const clearSearchHistory = () => {
  searchHistory.value = [];
  localStorage.removeItem('searchHistory');
};

// 计算属性：筛选后的商家列表
const filteredBusinesses = computed(() => {
  let filtered = [...businesses.value];

  // 分类筛选
  if (selectedCategory.value !== 'all') {
    filtered = filtered.filter(business =>
        business.orderTypeId === selectedCategory.value
    );
  }

  // 搜索筛选
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    filtered = filtered.filter(business =>
        business.businessName.toLowerCase().includes(keyword) ||
        (business.businessExplain && business.businessExplain.toLowerCase().includes(keyword))
    );
  }

  // 标签筛选
  if (selectedTags.value.length > 0) {
    filtered = filtered.filter(business => {
      // 这里根据实际业务逻辑判断商家是否符合选中的标签
      return true; // 简化处理
    });
  }

  // 价格筛选
  if (minPrice.value || maxPrice.value) {
    filtered = filtered.filter(business => {
      const avgPrice = business.avgPrice || 30; // 模拟人均价格
      if (minPrice.value && avgPrice < parseInt(minPrice.value)) return false;
      if (maxPrice.value && avgPrice > parseInt(maxPrice.value)) return false;
      return true;
    });
  }

  // 排序
  switch (selectedSort.value) {
    case 'distance':
      filtered.sort((a, b) => parseFloat(a.distance) - parseFloat(b.distance));
      break;
    case 'sales':
      filtered.sort((a, b) => b.monthSales - a.monthSales);
      break;
    case 'rating':
      filtered.sort((a, b) => b.rating - a.rating);
      break;
    case 'startPrice':
      filtered.sort((a, b) => a.startPrice - b.startPrice);
      break;
    case 'deliveryPrice':
      filtered.sort((a, b) => a.deliveryPrice - b.deliveryPrice);
      break;
    case 'priceDesc':
      filtered.sort((a, b) => (b.avgPrice || 0) - (a.avgPrice || 0));
      break;
    case 'priceAsc':
      filtered.sort((a, b) => (a.avgPrice || 0) - (b.avgPrice || 0));
      break;
    default:
      // 默认智能排序（综合评分、距离、销量等）
      break;
  }

  return filtered;
});

// 选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId;
};

// 选择地址
const selectAddress = () => {
  showAddressModal.value = true;
};

// 选择用户地址
const selectUserAddress = (address) => {
  selectedAddress.value = address.fullAddress;
  selectedAddressId.value = address.id;
  showAddressModal.value = false;
};

// 跳转到添加地址页面
const toAddAddress = () => {
  showAddressModal.value = false;
  router.push('/addUserAddress');
};

// 跳转到商家详情
const toBusinessInfo = (businessId) => {
  router.push({
    path: '/businessInfo',
    query: { businessId }
  });
};

// 获取分类图片
const getCategoryImage = (categoryId) => {
  const imageMap = {
    '1': require('@/assets/dcfl01.png'),
    '2': require('@/assets/dcfl02.png'),
    '3': require('@/assets/dcfl03.png'),
    '4': require('@/assets/dcfl04.png'),
    '5': require('@/assets/dcfl05.png'),
    '6': require('@/assets/dcfl06.png'),
    '7': require('@/assets/dcfl07.png'),
    '8': require('@/assets/dcfl08.png'),
    '9': require('@/assets/dcfl09.png'),
    '10': require('@/assets/dcfl10.png')
  };
  return imageMap[categoryId] || require('@/assets/dcfl01.png');
};

// 获取商家图片
const getBusinessImage = (imagePath) => {
  if (!imagePath) {
    // 使用模拟图片
    const images = [
      require('@/assets/sj01.png'),
      require('@/assets/sj02.png'),
      require('@/assets/sj03.png'),
      require('@/assets/sj04.png'),
      require('@/assets/sj05.png')
    ];
    return images[Math.floor(Math.random() * images.length)];
  }
  return imagePath;
};

// 切换喜欢状态
const toggleLike = (businessId) => {
  const business = businesses.value.find(b => b.id === businessId);
  if (business) {
    business.isLiked = !business.isLiked;
    // 这里可以调用API保存喜欢状态
  }
};

// 切换排序菜单
const toggleSortMenu = () => {
  showSortMenu.value = !showSortMenu.value;
};

// 选择排序
const selectSort = (sortValue) => {
  selectedSort.value = sortValue;
  showSortMenu.value = false;
};

// 切换标签
const toggleTag = (tagValue) => {
  const index = selectedTags.value.indexOf(tagValue);
  if (index > -1) {
    selectedTags.value.splice(index, 1);
  } else {
    selectedTags.value.push(tagValue);
  }
};

// 应用筛选
const applyFilter = () => {
  showFilter.value = false;
};

// 重置筛选
const resetFilter = () => {
  selectedTags.value = [];
  minPrice.value = '';
  maxPrice.value = '';
};

// 执行搜索
const performSearch = () => {
  if (searchKeyword.value.trim()) {
    saveSearchHistory(searchKeyword.value);
  }
  showSearch.value = false;
};

// 打开搜索框时自动聚焦
const openSearch = () => {
  showSearch.value = true;
  nextTick(() => {
    if (searchInput.value) {
      searchInput.value.focus();
    }
  });
};



const getActivityColor = (type) => {
  const colorMap = {
    'new': '#70bc46',
    'special': '#f1884f',
    'discount': '#ff5339'
  };
  return colorMap[type] || '#70bc46';
};

const getActivityIcon = (type) => {
  const iconMap = {
    'new': '新',
    'special': '特',
    'discount': '减'
  };
  return iconMap[type] || '新';
};

</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.wrapper header .icon-location-box {
  width: 3.5vw;
  height: 3.5vw;
  margin: 0 1vw 0 3vw;
}

.wrapper header .location-text {
  font-size: 4.5vw;
  font-weight: 700;
  color: #fff;
}

.wrapper header .location-text .fa-caret-down {
  margin-left: 1vw;
}

/****************** search ******************/
.wrapper .search {
  width: 100%;
  height: 13vw;
}

.wrapper .search .search-fixed-top {
  width: 100%;
  height: 13vw;
  background-color: #0097ff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.wrapper .search .search-fixed-top .search-box {
  width: 90%;
  height: 9vw;
  background-color: #fff;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5vw;
  color: #aeaeae;
  font-family: "宋体";
  user-select: none;
  cursor: pointer;
}

.wrapper .search .search-fixed-top .search-box .fa-search {
  margin-right: 1vw;
}

/****************** 点餐分类部分 ******************/
.wrapper .foodtype {
  width: 100%;
  height: 48vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}

.wrapper .foodtype li {
  width: 18vw;
  height: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.wrapper .foodtype li img {
  width: 12vw;
  height: 10.3vw;
}

.wrapper .foodtype li p {
  font-size: 3.2vw;
  color: #666;
}

/****************** 横幅广告部分 ******************/
.wrapper .banner {
  width: 95%;
  margin: 0 auto;
  height: 29vw;
  background-image: url(../assets/index_banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding: 2vw 6vw;
}

.wrapper .banner h3 {
  font-size: 4.2vw;
  margin-bottom: 1.2vw;
}

.wrapper .banner p {
  font-size: 3.4vw;
  color: #666;
  margin-bottom: 2.4vw;
}

.wrapper .banner a {
  font-size: 3vw;
  color: #c79060;
  font-weight: 700;
  cursor: pointer;
}

/****************** 超级会员部分 ******************/
.wrapper .supermember {
  width: 95%;
  margin: 0 auto;
  height: 11.5vw;
  background-color: #feedc1;
  margin-top: 1.3vw;
  border-radius: 2px;
  color: #644f1b;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .supermember .left {
  display: flex;
  align-items: center;
  margin-left: 4vw;
  user-select: none;
}

.wrapper .supermember .left img {
  width: 6vw;
  height: 6vw;
  margin-right: 2vw;
}

.wrapper .supermember .left h3 {
  font-size: 4vw;
  margin-right: 2vw;
}

.wrapper .supermember .left p {
  font-size: 3vw;
}

.wrapper .supermember .right {
  font-size: 3vw;
  margin-right: 4vw;
  cursor: pointer;
}

/****************** 推荐商家部分 ******************/
.wrapper .recommend {
  width: 100%;
  height: 14vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .recommend .recommend-line {
  width: 6vw;
  height: 0.2vw;
  background-color: #888;
}

.wrapper .recommend p {
  font-size: 4vw;
  margin: 0 4vw;
}

/****************** 推荐方式部分 ******************/
.wrapper .recommendtype {
  width: 100%;
  height: 5vw;
  margin-bottom: 5vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.wrapper .recommendtype li {
  font-size: 3.5vw;
  color: #555;
  cursor: pointer;
  position: relative;
}

.wrapper .recommendtype li .sort-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  min-width: 120px;
}

.wrapper .recommendtype li .sort-menu div {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.wrapper .recommendtype li .sort-menu div:hover {
  background: #f5f5f5;
}

.wrapper .recommendtype li .sort-menu div.active {
  color: #0097ff;
  background: #f0f8ff;
}

/****************** 推荐商家列表部分 ******************/
.wrapper .business {
  width: 100%;
  margin-bottom: 14vw;
}

.wrapper .business li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;
  border-bottom: solid 1px #ddd;
  display: flex;
  cursor: pointer;
}

.wrapper .business li img {
  width: 18vw;
  height: 18vw;
  object-fit: cover;
}

.wrapper .business li .business-info {
  width: 100%;
  box-sizing: border-box;
  padding-left: 3vw;
}

.wrapper .business li .business-info .business-info-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
}

.wrapper .business li .business-info .business-info-h h3 {
  font-size: 4vw;
  color: #333;
  margin: 0;
}

.wrapper .business li .business-info .business-info-h .business-info-like {
  width: 4vw;
  height: 4vw;
  color: #ff4757;
  font-size: 4vw;
  margin-right: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.wrapper .business li .business-info .business-info-star {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
  font-size: 3.1vw;
}

.wrapper .business li .business-info .business-info-star .business-info-star-left {
  display: flex;
  align-items: center;
}

.wrapper .business li .business-info .business-info-star .business-info-star-left .fa-star {
  color: #ddd;
  margin-right: 0.5vw;
}

.wrapper .business li .business-info .business-info-star .business-info-star-left .fa-star.filled {
  color: #fec80e;
}

.wrapper .business li .business-info .business-info-star .business-info-star-left p {
  color: #666;
  margin-left: 1vw;
  margin: 0;
}

.wrapper .business li .business-info .business-info-star .business-info-star-right {
  background-color: #0097ff;
  color: #fff;
  font-size: 2.4vw;
  border-radius: 2px;
  padding: 0.5vw 1vw;
}

.wrapper .business li .business-info .business-info-delivery {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
  color: #666;
  font-size: 3.1vw;
}

.wrapper .business li .business-info .business-info-delivery p {
  margin: 0;
}

.wrapper .business li .business-info .business-info-explain {
  display: flex;
  align-items: center;
  margin-bottom: 3vw;
}

.wrapper .business li .business-info .business-info-explain div {
  border: solid 1px #ddd;
  font-size: 2.8vw;
  color: #666;
  border-radius: 3px;
  padding: 0.5vw 1vw;
}

.wrapper .business li .business-info .business-info-promotion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.8vw;
}

.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left {
  display: flex;
  align-items: center;
}

.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-incon {
  width: 4vw;
  height: 4vw;
  border-radius: 3px;
  font-size: 2.5vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left p {
  color: #666;
  font-size: 3vw;
  margin-left: 2vw;
  margin: 0;
}

.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right {
  display: flex;
  align-items: center;
  font-size: 2.5vw;
  color: #999;
}

.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right p {
  margin-right: 2vw;
  margin: 0;
}

/* 加载和空状态 */
.loading, .empty-state {
  text-align: center;
  padding: 10vw;
  color: #999;
}

.loading .fa-spinner, .empty-state .fa-store {
  font-size: 8vw;
  margin-bottom: 3vw;
}

.loading span, .empty-state p {
  font-size: 3.5vw;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}

.modal-content {
  background: white;
  width: 100%;
  max-height: 80vh;
  border-radius: 3vw 3vw 0 0;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4vw;
  border-bottom: 1px solid #eee;
}

.modal-header h4 {
  margin: 0;
  font-size: 4.2vw;
}

.modal-header .fa-times {
  font-size: 5vw;
  color: #999;
  cursor: pointer;
}

/* 地址列表样式 */
.address-list {
  padding: 4vw;
}

.address-item {
  display: flex;
  align-items: center;
  padding: 3vw 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.address-item:last-child {
  border-bottom: none;
}

.address-info {
  flex: 1;
}

.address-name {
  font-size: 3.8vw;
  color: #333;
  margin: 0 0 1vw 0;
}

.address-detail {
  font-size: 3.2vw;
  color: #666;
  margin: 0;
}

.address-item .fa-check {
  color: #0097ff;
  font-size: 4vw;
}

.add-address {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw 0;
  color: #0097ff;
  cursor: pointer;
}

.add-address .fa-plus {
  margin-right: 2vw;
  font-size: 4vw;
}

.add-address span {
  font-size: 3.8vw;
}

/* 搜索模态框样式 */
.search-modal {
  border-radius: 0;
  max-height: 100vh;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 4vw;
  border-bottom: 1px solid #eee;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 2vw;
  padding: 2vw 3vw;
  margin-right: 3vw;
}

.search-input .fa-search {
  color: #999;
  margin-right: 2vw;
  font-size: 4vw;
}

.search-input input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 3.8vw;
}

.search-header span {
  font-size: 3.8vw;
  color: #666;
  cursor: pointer;
}

.search-history {
  padding: 4vw;
}

.search-history h5 {
  font-size: 3.5vw;
  color: #999;
  margin: 0 0 3vw 0;
}

.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  margin-bottom: 4vw;
}

.history-tag {
  background: #f5f5f5;
  padding: 2vw 3vw;
  border-radius: 3vw;
  font-size: 3.2vw;
  color: #666;
  cursor: pointer;
}

.clear-history {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 3.5vw;
  cursor: pointer;
}

.clear-history .fa-trash {
  margin-right: 2vw;
}

/* 筛选模态框样式 */
.filter-modal {
  max-height: 70vh;
}

.filter-options {
  padding: 4vw;
}

.filter-section {
  margin-bottom: 6vw;
}

.filter-section h5 {
  font-size: 3.8vw;
  color: #333;
  margin-bottom: 3vw;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
}

.filter-tag {
  background: #f5f5f5;
  padding: 2vw 4vw;
  border-radius: 3vw;
  font-size: 3.2vw;
  color: #666;
  cursor: pointer;
}

.filter-tag.active {
  background: #0097ff;
  color: white;
}

.price-range {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.price-range input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 2vw;
  padding: 2vw;
  font-size: 3.5vw;
  text-align: center;
}

.price-range span {
  color: #666;
}

.filter-actions {
  display: flex;
  border-top: 1px solid #eee;
}

.filter-actions button {
  flex: 1;
  border: none;
  padding: 4vw;
  font-size: 4vw;
  cursor: pointer;
}

.reset-btn {
  background: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background: #0097ff;
  color: white;
}


</style>